/* 
1 分拆组件 负责筛选条件  Filter
2 页面加载完毕的时候 数据初始化  渲染  
  1 发送请求 获取数据  循环显示  
  2 使用虚拟列表 组件来渲染页面 
  3 修改之前的 地图找房代码封装了 一个 房源组件
  4 直接使用房源组件

3 当用户点击了筛选按钮之后
  1 重新构造 接口的参数 然后发送请求到后台 重新渲染  
  2 修改了一下 之前的筛选的代码 处理 价格字段
  3 给List组件添加一个 key  强制重新渲染  

4 用户滑动页面的 分页 加载下一页 
  1 找到分页事件 节流做了没  有没有下一页数据 
  2 节流
    1 开门  给人使用
    2 关门  不让使用
    3 人使用完毕 重新把门打开 

5 思考 分页 和 筛选对代码的影响 
  1 做筛选的时候 需要对页码数据重置
  2 对数组进行重置 
 */



import Filter from "../../components/Filter";
import { NavBar, Icon, Toast } from 'antd-mobile';
import React, { Component } from 'react';
import CitySearch from "../../components/CitySearch";
import indexCss from "./index.module.scss";
import { request } from "../../utils/request";
import { connect } from "react-redux";
import { List } from "react-virtualized";

import HouseItem from "../../components/HouseItem";


console.log("列表找房");
class Index extends Component {


  state = {
    list: []
  }



  // 接口要求  常规参数(不包含 筛选条件)
  Params = {
    // 城市id
    cityId: "",
    // 开始的条数
    start: 1,
    // 结束的条数
    end: 20
  }

  // 接口要求  筛选参数
  FilterParams = {

  }

  // 节流阀  控制发送请求 
  IsLoadding = false;

  // 数据的长度
  Count = 0;


  async componentDidMount() {
    const res = await request.get("/area/info", { params: { name: this.props.cityName } });
    this.Params.cityId = res.body.value
    this.getList();


  }

  // 获取页面数据
  getList = async () => {
    const res = await request.get("/houses", { params: { ...this.Params, ...this.FilterParams } });
    console.log(res);
    // 分页要求 做的数组合并 
    this.setState({ list: [...this.state.list, ...res.body.list] });

    // 数据回来了 请求成功了
    // this.IsLoadding=false;

    // 获取 总条数
    this.Count = res.body.count;

  }


  // 筛选组件 点击确定
  onFilterChange = (filterParams) => {
    // 重置页码  和 数组
    this.Params = {
      start: 1,
      end: 20
    }

    this.setState({ list: [] });

    this.FilterParams = filterParams;
    this.getList();
  }


  // 显示列表的每一项
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // Index of row within collection
    isScrolling, // The List is currently being scrolled
    isVisible, // This row is visible within the List (eg it is not an overscanned row)
    style, // Style object to be applied to row (to position it)
  }) => {
    const { list } = this.state;
    return (
      <div key={list[index].houseCode} style={style}>
        <HouseItem house={list[index]} />
      </div>
    );
  }

  // 滚动条触底事件
  onScroll = async ({ scrollHeight, clientHeight, scrollTop }) => {
    // console.log(clientHeight, scrollHeight, scrollTop);
    // scrollTop 滚动条滚动的距离 随着页面滚动 值会变化
    // scrollHeight  长列表的高度 (大于 容器的高)
    // clientHeight  滚动容器的高 

    // 通过判断 数组的长度 来知道是不是第一次onscrll 被动的触发  

    // 是否是第一次触发onscroll  
    const isFirstScroll = this.state.list.length === 0;
    // 是否超出数据长度 
    const overMore = this.Params.start >= this.Count;
    // 是否滚动条触底了
    const reachBottom = scrollHeight - clientHeight - scrollTop < 20;
    // 是否有人在发送请求  this.IsLoadding

    // 判断的是非法的情况
    if (isFirstScroll || overMore || !reachBottom || this.IsLoadding) {
      return
    }

    // 没有人在发请求 告诉别人 我正在发送请求
    this.IsLoadding = true;


    const unit = this.Params.end - this.Params.start + 1;
    this.Params.start += unit;
    this.Params.end += unit;

    // 重新发送请求  成功之后  数组拼接 
    await this.getList();

    // 关闭节流阀

    this.IsLoadding = false;
  }

  render() {
    const { list } = this.state;
    return (
      <div>
        <div className={indexCss.found_nav}  >
          <NavBar
            style={{ backgroundColor: "#f6f5f6" }}
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => this.props.history.goBack()}
          ></NavBar>
          <div className={indexCss.city_search}>
            <CitySearch iconMapColor="green" > </CitySearch>
          </div>
        </div>
        <Filter onFilterChange={this.onFilterChange}></Filter>
        {/* 内容 列表 */}
        <div className={indexCss.found_list}>
          <List
            width={window.outerWidth}
            height={window.outerHeight - 95 - 40 * 0.3125 * window.outerWidth * 0.01}
            rowCount={list.length}
            rowHeight={100 * 0.3125 * window.outerWidth * 0.01}
            rowRenderer={this.rowRenderer}
            onScroll={this.onScroll}
          />
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.mapReducer.cityName
})

const mapDispatchToProps = () => ({})




export default connect(mapStateToProps, mapDispatchToProps)(Index);